<template>
  <div class="order">
    <button @click="back">返回</button>
    <h1>我的订单</h1>
    <hr>
    <table>
      <tr>
        <td>商品信息</td>
        <td>单价</td>
        <td>金额</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in obj" :key="item" style="border-bottom: 2px solid rgb(112, 204, 244,0.2);" >
        <td><img :src="item.goodsimg" width="50" height="50" alt=""><span class="ms-2">{{item.goodsname}}</span></td>
        <td>￥{{item.goodsprice}}</td>
        <td>￥{{item.count*item.goodsprice}}</td>
        <td>{{item.status}}</td>
        <td><button @click="backmoney(item)">退款</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
// @ is an alias to /src
import { objectExpression } from '@babel/types'
import axios from 'axios'

export default {
  data(){
    return{
      obj:[]
    }
  },
  created(){

      if(!this.$store.state.userInfo.username){
          this.$router.push({
              path: '/'
          })
      }
     axios.get(`http://127.0.0.1:4523/m1/1263105-0-default/good`).then(
        (res)=>{
          // console.log(res.data.obj)
          this.obj=res.data.obj.slice(0,3);
          if(this.$route.params.id){
              // 数据类型转换
              this.shopgoods=JSON.parse(this.$route.params.id)
              // const x=console.log(typeof this.shopgoods)
                this.shopgoods=this.shopgoods.forEach((shopgood)=>{
                this.obj.unshift(shopgood)
              })
              
          }
          // if(this.$route.params.id){
          //   this.shopgoods=JSON.parse(this.$route.params.id)
          //   console.log(this.shopgoods)
          //   this.obj.unshift(this.shopgoods)
          // }
        }
      ).catch((error)=>{
        console.log(error)
      })
      

  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    backmoney(x){
      x.status="已退款"
      if(x.status==="已退款") {
        alert("退款成功！")
      }
      
    }
  }
}
</script>
<style>
  .order{
    width: 1000px;
    margin: 0 auto;
  }
  .order td{
    width: 200px;
    height: 50px;
  }
  .order td:nth-child(1){
    width: 500px;
    height: 50px;
  }
  .order td:nth-child(5){
    width: 60px;
    height: 50px;
  }
  .order button{
    height: 40px;
    padding: 5px;
    margin-left: 5px;
    border-radius: 5px;
    background-color: white;
    border: 2px solid #93d2f3;
  }
  .order button:hover{
    background-color: #93d2f3;
    color: white;
  }
</style>
